<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getGoodsExpireListService } from '@/api/goods.js'
import { getCategoryListService } from '@/api/category.js'

// 搜索表单
const searchForm = ref({
    goodsName: '',
    category: ''
})

// 分类选项
const categoryOptions = ref([])

// 商品列表数据模型
const goods = ref([])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 获取分类列表
const getCategoryList = async () => {
    try {
        const res = await getCategoryListService()
        if (res.code === 0) {
            categoryOptions.value = res.data
        }
    } catch (error) {
        console.error('获取分类列表失败:', error)
    }
}

// 查询商品列表
const echoGoodsList = async () => {
    try {
        const res = await getGoodsExpireListService({
            pageNum: currentPage.value,
            pageSize: pageSize.value,
            goodsName: searchForm.value.goodsName || undefined,
            category: searchForm.value.category || undefined
        })
        if (res.code === 0) {
            goods.value = res.data.items
            total.value = res.data.total
        } else {
            ElMessage.error(res.message || '获取临期商品列表失败')
        }
    } catch (error) {
        console.error('获取临期商品列表失败:', error)
        ElMessage.error('获取临期商品列表失败')
    }
}

// 搜索
const handleSearch = () => {
    currentPage.value = 1
    echoGoodsList()
}

// 重置表单
const resetForm = () => {
    searchForm.value.goodsName = ''
    searchForm.value.category = ''
    handleSearch()
}

// 分页相关方法
const handleSizeChange = (val) => {
    pageSize.value = val
    echoGoodsList()
}

const handleCurrentChange = (val) => {
    currentPage.value = val
    echoGoodsList()
}

// 页面加载时获取数据
onMounted(() => {
    getCategoryList()
    echoGoodsList()
})
</script>

<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">临期商品管理</span>
                </div>
            </template>
            
            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <el-form-item label="商品名称">
                        <el-input v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable class="custom-input" />
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="searchForm.category" placeholder="请选择分类" clearable class="custom-input">
                            <el-option
                                v-for="item in categoryOptions"
                                :key="item.id"
                                :label="item.categoryName"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch" class="search-button">
                            <el-icon><Search /></el-icon>查询
                        </el-button>
                        <el-button @click="resetForm" class="reset-button">
                            <el-icon><Refresh /></el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 商品列表 -->
            <el-table 
                :data="goods" 
                style="width: 100%" 
                border 
                stripe
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
                :row-style="{ height: '60px' }"
                :cell-style="{ padding: '8px 0' }">
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column label="商品名称" prop="goodsName" min-width="150" align="center" />
                <el-table-column label="生产日期" prop="produceDate" width="180" align="center" />
                <el-table-column label="过期日期" prop="overdueDate" width="180" align="center" />
                <el-table-column label="剩余天数" width="120" align="center">
                    <template #default="{ row }">
                        <span :class="['days-left', row.daysLeft <= 7 ? 'urgent' : '']">
                            {{ row.daysLeft }}天
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="提示信息" min-width="200" align="center">
                    <template #default="{ row }">
                        <el-tag :type="row.daysLeft <= 7 ? 'danger' : 'warning'">
                            {{ row.message }}
                        </el-tag>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无临期商品数据" />
                </template>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
                <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
    }
    
    .search-area {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #f5f7fa;
        border-radius: 4px;
    }
}

.custom-input {
    width: 100%;
}

.days-left {
    font-weight: bold;
    color: #67c23a;

    &.urgent {
        color: #f56c6c;
    }
}

.search-button, .reset-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

:deep(.el-descriptions) {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-table) {
    margin-top: 10px;
}

:deep(.el-input-number) {
    width: 100%;
}

.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}
</style>